<template>
    <div class="work-page publish-work-page">
        <form @submit="()=>{return false;}">
            <div class="basic-box">
                <div class="panel-tit">作品信息</div>
                <div class="p-field-control" id="form_title">
                    <input type="text" v-model="form.title" placeholder="请输入作品名称" maxlength="60"><i class="word-num">{{60-form.title.length}}</i>
                </div>
                <div class="p-field-control" id="form_content">
                    <quillEditor class="pro-quill-editor" ref="refEditor" v-model="form.content" :options="editorOption" @input="onEditInput($event)"></quillEditor>
                    <i class="word-num bot-r">{{1000-textLen}}</i>
                </div>
                <div class="drop-down-control">
                    <div class="flex-ddl-item">
                        <!-- <DropDown class="mr20" :width="150" placeholder="分类"/> -->
                        <el-cascader  id="form_categoryId"
                            v-model="selectedOptions" ref="refCascader"
                            clearable
                            placeholder="类型" class="pro-work-elcascader mr20"
                            :options="categoryList"
                            :props="cateProps"
                            @change="categoryChange" popper-class="pro-wlrk-elcascader-proper"
                            ></el-cascader>
                        <DropDown class="mr20"  id="form_comeFrom" :list="allCateTypes.sources" :value.sync="form.comeFrom" placeholder="来源"/>
                        <DropDown :list="allCateTypes.copyrights"  id="form_copyRight" :value.sync="form.copyRight" placeholder="版权"/>
                    </div>
                </div>
                <div class="panel-tit mt40">上传封面<span class="small-tip">支持jpg\png\gif格式，建议尺寸800x600px,大小不超过5M；请不要上传含其他网站水印的内容</span></div>
                <div id="form_image">
                    <el-upload
                    :action="aliInfo.host"
                        :show-file-list="false"
                        :data="aliData" accept=".jpg,.png,.gif"
                        :on-success="firstPictureSuccess"
                        :drag="true"
                        :before-upload="firstPictureBefore" class="upload-btn">
                    <img loading="lazy"
                        v-if="form.image"
                        :src="form.image"
                        style="width: 100%; height: 100%"
                        class="avatar"
                        />
                    </el-upload>
                </div>
                <div class="panel-tit mt48 flex-between">
                    <div>
                        作品标签<span class="small-tip">添加标签，可以使作品被更多的用户发现（最多添加5个）</span>
                    </div>
                </div>
                <div class="tag-control">
                    <div class="inp-tags">
                        <a class="tag" v-for="(item, i) in form.tags" :key="i">{{item}}<i class="del-tag" @click="handleClearTag(item,i)"></i></a>
                    </div>
                    <input type="text" v-model="inputValue" maxlength="16" placeholder="按回车键Enter创建标签" @keyup="handleInputConfirm"><i class="num">还可以创建{{5-form.tags.length}}个标签</i>
                </div>
                <div class="recommend-tag-box">
                    <div class="label">推荐标签</div>
                    <div class="tags">
                        <a v-for="(tag,tdx) in tjTags" :key="tdx" class="tag" :class="{'active':tag.selected}" @click="chooseTag(tag)">{{tag.title}}</a>
                    </div>
                </div>
                
                <div class="panel-tit mt48 flex-between">
                    <div>
                        上传视频<span class="small-tip">暂时仅支持视频平台外链导入（腾讯视频/优酷/B站等）</span>
                    </div>
                    <div class="pro-import-area">
                        <a class="import-video-btn" @click="isNotAreaImport=true;showImport=!showImport">导入视频</a>
                        <div class="pro-import-video-box"  v-if="showImport">
                            <textarea v-model="linkText" placeholder="粘贴视频链接到此处，支持腾讯视频、优酷视频、bilibili"></textarea>
                            <div class="btns">
                                <a class="cancel" @click="showImport=false">取消</a>
                                <a class="add" @click="addLink">添加</a>
                            </div>
                        </div>
                        <div class="modal-mask" v-if="showImport" @click="showImport=false">

                        </div>
                    </div>
                </div>
                <div class="upload-videos">
                    <a class="upload-video-btn zdy_upload_video" v-for="(item,idx) in form.videoUrl" :key="idx" @click="chooseVideo(item,idx)">
                        <template v-if="item.url">
                            <iframe class="ifrm-play" frameborder="0" :src="item.url" allowFullScreen="true"></iframe>
                            <span class="play-icon"></span>
                            <a class="del-btn" @click.stop="item.url='';$forceUpdate();"></a>
                        </template>
                    </a>
                    <!-- <el-upload v-for="(item,idx) in form.videoUrl" :key="idx" class="upload-video-btn" :action="aliInfo.host"
                    :show-file-list="false"
                    :data="aliData" accept=".mp4,.avi"
                    :drag="true" :on-error="videoUpError"
                    :before-upload="(file)=>{ return videoUploadBefore(file,idx)}" :on-progress="videoProgress" :on-success="onVideoSucc">
                    <video controls :src="item.url" v-if="item.percentage==100"></video>
                    </el-upload> -->
                </div>
                <div class="panel-tit mt40">其他设置</div>
                <!-- <div class="p-label-field-control">
                    <label>开发商</label><input type="text" placeholder="请输入开发商">
                </div> -->
                <div class="p-label-field-control mt40">
                    <label>评论</label><el-checkbox true-label="1" class="pro-pbform-ckbox" false-label="0" v-model="form.commentStatus">关闭评论</el-checkbox>
                </div>
            </div>
            <div class="game-img-workbox">
                <div class="panel-tit flex-between">
                    <div class="tit">作品<el-tooltip popper-class="mini-tip-pop" content="成为推荐作品标准：1. 视觉优秀；2. 规范完整；3. 创意新颖；4. 有启发性" placement="bottom" effect="light"><i class="el-icon-question"></i></el-tooltip></div>
                    <div class="funs"  v-if="form.images.length>0">
                        <template v-if="isBatchGimg">
                            <span class="img-select-len">已选中<i>{{imgSelectLen}}</i>个 <i class="cancel-select" @click="handleCancelSelect('images')"></i></span>
                            <a class="select-all" @click="selectAll('images')">{{isCkall?'取消全选':'全选'}}</a>
                            <a class="put-tag" @click="showSetTag=true">标签</a>
                            <a class="del-img" @click="handleRemove('images')">删除</a>
                        </template>
                        <a class="batch-mgr-btn" v-else @click="batchSel('images')">批量管理</a>
                    </div>
                </div>
                <div class="single-upload-btn pro-dnd-area" v-show="form.images.length==0">
                    <div class="ass-con">
                        <i class="up-text">发布作品</i>
                        <div class="plus">拖拽图片到这里，或 <a class="go-add pro_zdy_myupload">点此添加</a></div>
                        <i class="tip">支持jpg/png/gif格式，单个文件最大支持10M</i>
                    </div>
                </div>
                <!-- <template v-if="form.images.length>0"> -->
                <div class="g-img-mx-harea" v-show="form.images.length>0">
                    <div class="gm-imgs">
                        <div class="g-img-item" :class="[{'no-img':idx>5,'act-sel':isBatchGimg}]" v-for="(img,idx) in form.images" :key="idx">
                            <template>
                                <img loading="lazy" v-if="img.progressno==100" :src="img.url" alt="">
                                <span class="btns hid-el">
                                    <!-- <a class="move-btn"></a> -->
                                    <a class="view-btn" @click="curImgUrl=img.url;showViewImg=true"></a>
                                    <a class="del-btn" @click="keyProperty='images';img.selected=true;showDelConfirm=true;"></a>
                                </span>
                                <!-- <a class="set-tag hid-el"  @click="setShowTag(idx)">设置标签</a> -->
                                <a class="select-btn" :class="{'active':img.selected}" @click="img.selected=!img.selected"></a>
                            </template>
                        </div>
                    </div>
                </div>
                <div class="bot-single-upload-area pro-dnd-area" v-show="form.images.length>0">
                    <div class="plus">拖拽图片到这里，或 <a class="go-add pro_zdy_myupload">点此添加</a></div>
                    <span class="tip">已上传 {{form.images.length}} 张</span>
                </div>
                <!-- </template> -->
            </div>
        </form>
        <div class="footer-fun-bar">
            <a class="publish" @click="batchArticle(0)">{{form.id?'修改':'发布'}}作品</a>
            <a class="preview" @click="handlePreviewFun">预览</a>
            <a class="draft" @click="batchArticle(2)">存入草稿</a>
        </div>

        <a-modal v-model="showCut" destroyOnClose centered :footer="null" :closable="false" width="840px">
            <div class="cover-win-box">
                <div class="u-header">上传封面 <a class="close-win-box" @click="showCut=false"></a></div>
                <div class="win-modal-con">
                    <div class="left">
                        <img loading="lazy" :src="croPoption.image" ref="gimage" id="gimage" alt="" />
                    </div>
                    <div class="result">
                        <span class="img-box preview-img">
                            
                        </span>
                        <span class="preview-tit">效果预览</span>
                    </div>
                </div>
                <div class="fbar">
                    <el-upload class="again-upload" :action="aliInfo.host"
                    :show-file-list="false"
                    :data="aliData"
                    :on-success="firstPictureSuccess"
                    :before-upload="firstPictureBefore">重新上传</el-upload>
                    <a class="cut-btn" @click="handleConfirmCrop">裁切</a>
                </div>
            </div>
        </a-modal>

        <a-modal v-model="showSetTag" destroyOnClose centered :footer="null" :closable="false" width="840px">
            <div class="cover-win-box set-img-tag-win-box">
                <div class="u-header">设置标签 <a class="close-win-box" @click="showSetTag = false"></a></div>
                <form class="set-tag-modal-con"  onsubmit="return false">
                    <div class="inp-control-box">
                        <input type="text" maxlength="10" v-model="tagkeyword" @keypress.enter="onEnter" placeholder="新增或搜索标签（方便用户进行标签搜索和创建新标签）"><i v-if="tagkeyword" @click="tagkeyword=''" class="clear-by-search"></i>
                    </div>
                    <div class="tj-tags">
                        <div class="label">推荐标签</div>
                        <div class="tags">
                            <template v-if="!tagkeyword">
                                <span :class="{'active':tag.selected}" v-for="(tag,tdx) in allCateTypes.funs" v-if="(showMoreTag||tdx<20)&&tag.title!='全部'" @click="chooseImgTag(tag)">{{tag.title}}</span>
                                <span class="more-tag" :class="{ 'up': showMoreTag }" @click="showMoreTag = !showMoreTag"></span>
                            </template>
                            <template v-else>
                                <span :class="{'active':tag.selected}" v-for="(tag,tdx) in allCateTypes.funs" v-if="tag.show&&tag.title!='全部'" @click="chooseImgTag(tag)">{{tag.title}}</span>
                            </template>
                            <!-- <span>游戏杂谈</span>
                            <span>教程攻略</span>
                            <span>游戏杂谈</span>
                            <span>教程攻略</span>
                            <span>游戏杂谈</span>
                            <span>教程攻略</span>
                            <span>游戏杂谈</span>
                            <span>教程攻略</span>
                            <span v-for="i in 30" :key="i" v-if="i < 8 || showMoreTag">游戏杂谈</span> -->
                            <!-- <span class="more-tag" :class="{ 'up': showMoreTag }" @click="showMoreTag = !showMoreTag"></span> -->
                        </div>
                    </div>
                    <div class="tj-tags">
                        <div class="label">最近使用</div>
                        <div class="tags">
                            <span>暂停</span>
                            <span>招募</span>
                            <span>排行榜</span>
                            <span>木头</span>
                            <span>暂停</span>
                            <span>招募</span>
                            <span>排行榜</span>
                            <span>木头</span>
                        </div>
                    </div>
                </form>
                <div class="fbar">
                    <a class="again-upload" @click="showSetTag = false">取消</a>
                    <a class="cut-btn" @click="handleConfirmAddTag">确定</a>
                </div>
            </div>
        </a-modal>
        
        <a-modal v-model="showConfirm" destroyOnClose centered :footer="null" :closable="false" width="408px">
            <div class="confirm-mask">
                <div class="confirm-win">
                    <div class="title">确定要离开吗?</div>
                    <div class="msg">系统可能不会保存填写的信息哦～</div>
                    <div class="btns">
                        <a class="confirm" @click="handleOK">确定</a>
                        <a class="cancel" @click="showConfirm=false">取消</a>
                    </div>
                </div>
            </div>
        </a-modal>

        <a-modal v-model="showDelConfirm" destroyOnClose centered :footer="null" :closable="false" width="366px">
            <div class="fav-component">
                <div class="fav-header">
                    删除提示
                </div>
                <div class="folder-con" style="margin-top:30px;text-align:center;font-size:14px;">
                    确定删除吗？删除后当前内容都会被删除且不可恢复。
                </div>
                <div class="btns m-widbtns">
                    <a class="pro-default-btn" @click="handleConfirmDel">确认</a>
                    <a class="pro-confirm-btn" @click="showDelConfirm = false">取消</a>
                </div>
            </div>
            <!-- <div class="modal-mask" @click="showDelConfirm = false">

            </div> -->
        </a-modal>

        
        <Play :url="playUrl" @close="showPlay=false" v-if="showPlay"/>
        <ViewImg :url="curImgUrl" v-if="showViewImg" @close="showViewImg=false"/>
    </div>
</template>

<script>
import ViewImg from '@/components/viewImg'
import Play from './play'
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";
import "../../../static/utils/jquery.js";
import "../../../static/utils/webuploader.js";
import { quillEditor } from "vue-quill-editor";
import api from '@/api/api'
import DropDown from '@/components/dropdown'
export default {
    components:{
        DropDown,quillEditor,Play,ViewImg
    },
    computed:{
        imgSelectLen(){
            let datas=this.form.images.filter(r=>{
                return r.selected;
            })
            return datas.length;
        }
    },
    data(){
        return {
            isposted:false,
            tagkeyword:'',
            textLen:0,
            curImgUrl:'',
            showViewImg:false,
            isNotAreaImport:false,
            showPlay:false,
            playUrl:'',
            tjTags:[],
            keyProperty:'',
            showDelConfirm:false,
            isBatchGimg:false,
            linkText:'',
            showImport:false,
            showConfirm:false,
            nextFun:null,
            inputValue:'',
            activeUploadIndex:false,
            showMoreTag:false,
            showCut:false,
            showSetTag:false,
            aliInfo:{
                host:''
            },
            aliData:{},
            myCropper: null,
            cateProps: {
                value: "id",
                label: "title",
                children: "child",
            },
            categoryList:[],
            selectedOptions:[],
            editorOption: {
                placeholder: "介绍一下作品特色，让用户更感兴趣...（非必填）",
                modules: {
                toolbar: {
                    container: [
                        ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
                        ["blockquote"], // 引用
                        [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
                        [{ list: "ordered" }, { list: "bullet" }], //列表
                        [{ indent: "-1" }, { indent: "+1" }], // 缩进
                        [{ direction: "rtl" }], // 文本方向
                        [{ size: ["small", false, "large", "huge"] }], // 字体大小
                        [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
                        [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
                        [{ font: [] }], //字体
                        [{ align: [] }], //对齐方式
                        ["clean"], //清除字体样式
                        ["image"], //上传图片、上传视频
                        ["video"], //上传图片、上传视频
                    ]
                    // ,
                    // handlers: {
                    //     image: function (val) {
                    //         this.currentUploadType=1;
                    //         if (val) {
                    //         document.querySelector(".quill-img input").click();
                    //         } else {
                    //         this.quill.format("image", false);
                    //         }
                    //     },
                    //     video: function (val) {
                    //             this.currentUploadType=2;
                    //             if (val) {
                    //                 document.querySelector(".quill-video input").click();
                    //             } else {
                    //                 this.quill.format("video", false);
                    //             }
                    //         }
                    //     }
                    }
                }
			},
            croPoption: {
                image: "",
                outputSize: 1, // 裁剪生成图片的质量 0.1 - 1
                outputType: "png", //	裁剪生成图片的格式 jpeg || png || webp
                canScale: false, // 图片是否允许滚轮缩放 默认true
                autoCrop: true, // 是否默认生成截图框 默认false
                canMove: true, //上传图片是否可以移动 默认true
                autoCropWidth: 800, //默认生成截图框宽度	容器的80%	0~max
                autoCropHeight: 600, //默认生成截图框高度	容器的80%	0~max
                // fixedBox: true, // 固定截图框大小 不允许改变	false	true | false
                fixed: true, //是否开启截图框宽高固定比例
                original: true, // 上传图片按照原始比例渲染	false	true | false
                infoTrue: true, // 为展示真实输出图片宽高 false 展示看到的截图框宽高	false	true | false
                centerBox: true, // 截图框是否被限制在图片里面	false	true | false
                canMoveBox: false, //截图框能否拖动	true	true | false
                fixedNumber: [1, 1], // 截图框的宽高比例 [宽度, 高度]
            },
            allCateTypes:{
                categorys:[],
                themes:[],
                funs:[],
                materials:[],
                devices:[],
                orientations:[],
                eras:[],
                styles:[],
                styles:[],
                sources:[]
            },
            form:{
                tags:[],
                content:'',
                title:'',
                images:[],
                activityImages:[],
                imagesBean:{
                    imageList:[],
                    tagNames:''
                },
                videoUrl:[{},{},{},{},{},{}]
            }
        }
    },
    async mounted(){
        $('#app').removeClass('info-detail-page');
        let _allCateTypes=JSON.parse(decodeURIComponent(localStorage.getItem('OBJ-CATE-ALL-TYPES')));
        let res=await api.getAttributes({type:'from',categoryId:22})
        res.data.from.map(item=>{
            item.title=item.name;
            item.value=item.name;
        })
        _allCateTypes.sources=res.data.from;
        res=await api.getAttributes({type:'copyright',categoryId:22})
        res.data.copyright.map(item=>{
            item.title=item.name;
            item.value=item.name;
        })
        _allCateTypes.copyrights=res.data.copyright;
        this.allCateTypes=_allCateTypes;

       this.initQuery();

        res=await api.getChildrenListByParentId({parentId:1})
        var category = res.data;
          category.forEach((f) => {
            if (f.child.length == 0) {
              delete f.child;
            } else {
              f.child.forEach((f1) => {
                if (f1.child.length == 0) {
                  delete f1.child;
                } else {
                  f1.child.forEach((f2) => {
                    if (f2.child.length == 0) {
                      delete f2.child;
                    } else {
                      f2.child.forEach((f3) => {
                        if (f3.child.length == 0) {
                          delete f3.child;
                        }
                      });
                    }
                  });
                }
              });
            }
          });
        this.categoryList = category;

        res=await api.getCategoryForInspiration({categoryId:1})
        this.tjTags=res.data.filter(r=>{
            return r.key=='theme';
        })[0].result.splice(1,20);
        let that=this;
        // this.initZuploadvideo();
        this.$nextTick(()=>{
            that.initUpload();
            // that.initZuploadvideo();
            if($('.t-adv').length>0){
                $('#app').addClass('b-has-adv');
            }
        })
    },
    beforeRouteLeave(to,from,next){
        let data=this.form;
        this.nextFun=next;
        let _upvlens=data.videoUrl.filter(r=>{
            return !!r.url;
        }).length;
        if(data.title||data.content||data.categoryId||data.tags.length>0||data.style||data.device||data.orientation||data.era||data.comeFrom||data.imagesBean.tagNames||data.copyRight||data.manufacturer||data.commentStatus>0||data.image||_upvlens>0||data.images.length>0){
            this.showConfirm=true;
        }else{
            next()
        }
    },
    watch:{
        $route(newd){
            if(!newd.params.id){
                this.form={
                    tags:[],
                    content:'',
                    title:'',
                    images:[],
                    activityImages:[],
                    imagesBean:{
                        imageList:[],
                        tagNames:''
                    },
                    videoUrl:[{},{},{},{},{},{}]
                }
            }else{
                this.initQuery();
            }
        },
        tagkeyword(newd){
           this.allCateTypes.funs.map(item=>{
            if(item.title.indexOf(newd)>-1){
                item.show=true;
            }else{
                item.show=false;item.showOther=false;
            }
           })
           this.$forceUpdate();
        }
    },
    destroyed(){
        window.removeEventListener('beforeunload', this.beforeUnload);
    },
    created(){
        window.addEventListener('beforeunload', this.beforeUnload);
    },
    methods:{
        beforeUnload(event) {
            event.preventDefault();
            event.returnValue = '';
        },
        onCascaderMouseover(e){
            
        },
        setShowTag(idx){
            let tags=this.form.images[idx].tags;
            this.allCateTypes.funs.map(item=>{
                item.selected=false;
                if(tags.includes(item.title)){
                    item.selected=true;
                }
            })
            this.setIdx = idx; 
            this.giveType=2;
            this.setType = 1;
            this.showSetTag=true;
        },
        onEnter(){
            let val=this.tagkeyword.trim();
            if(!val)return;
            let _isExists=this.allCateTypes.funs.filter(r=>{
                return r.title==val;
            })
            if(_isExists.length>0){
                this.tagkeyword='';
                this.$amessage.warn('标签已存在')
                return;
            }
            this.allCateTypes.funs=[...[{title:val,selected:true,show:true}],...this.allCateTypes.funs];
            // if(this.setType==1){
            //     if(this.form.images[this.setIdx].tags.length==10){
            //         this.$amessage.warn('最多可设置10个标签')
            //     }else{
            //         this.form.images[this.setIdx].tags.push(val);
            //         this.$amessage.success('添加成功')
            //     }
            // }else{
            //     if(this.form.activityImages[this.setIdx].tags.length==10){
            //         this.$amessage.warn('最多可设置10个标签')
            //     }else{
            //         this.form.activityImages[this.setIdx].tags.push(val);
            //         this.$amessage.success('添加成功')
            //     }
            // }
            this.showMoreTag=true;
            this.tagkeyword='';
        },
        onEditInput(){
            let obj=this.$refs['refEditor'].quill;
            let len=obj.getText().length-1;
            this.textLen=len;
            if(len>1000){
                // this.$amessage.warn('最多输入1000字~');
                let _text=obj.getText().slice(0,1000);
                obj.setText(_text);
            }
        },
        async initQuery(){
            let id=this.$route.params.id;
            let res={};
            if(id){
                res=await api.getArticleById(id);
                // content:'',
                //     title:'',
                //     images:[],
                //     activityImages:[],
                //     videoUrl:[{},{},{},{},{},{}]
                let videos=[];
                if(res.data.videoUrl){
                    let _urls=res.data.videoUrl.split(',');
                    _urls.map(_url=>{
                        videos.push({
                            name: _url,
                            url: _url,
                            completed: true,
                            percentage: 100
                        })
                    })
                }
                let model={
                    id:res.data.id,
                    title:res.data.title,
                    content:res.data.content,
                    images:res.data.imagesBean.imageList?res.data.imagesBean.imageList.filter(r=>{return !r.activity}):[],
                    videoUrl:videos,
                    categoryId:res.data.categoryId.toString(),
                    status:res.data.status,
                    commentStatus:res.data.commentStatus,
                    style:res.data.style,
                    device:res.data.device,
                    orientation:res.data.orientation,
                    era:res.data.era,
                    comeFrom:res.data.comeFrom,
                    image:res.data.image,
                    copyRight:res.data.copyRight,
                    tags:res.data.tags?res.data.tags.split(','):[],
                    manufacturer:res.data.manufacturer
                }
                // let model=res.data;
                model.images.map(item=>{
                    item.progressno=100;
                    item.completed=true;
                    item.selected=true;
                })
                this.form=model;
            }
        },
        chooseVideo(item,idx){
            this.isNotAreaImport=false;
            if(item.url){
                this.playUrl=item.url;
                this.showPlay=true;
            }else{
                this.videoIdx=idx;
                this.showImport=true;
            }
        },
        chooseImgTag(tag){
            tag.selected=tag.selected==undefined?true:!tag.selected;
            let selLen=this.allCateTypes.funs.filter(r=>{
                return r.selected;
            })
            this.$forceUpdate();
            if(selLen.length>10){
                tag.selected=false;
                this.$amessage.warn('最多可设置10个标签')
                return;
            }
        },
        handleConfirmAddTag(){
            let items=this.allCateTypes.funs.filter(r=>{return r.selected;});
            let tags=items.map(r=>{return r.title});
            if(tags.length>10){
                this.$amessage.warn('最多可设置10个标签')
                return;
            }
            this.form.images[this.setIdx].tags=tags;
            this.showSetTag=false;
            this.allCateTypes.funs.filter(r=>{
                r.selected=false;
            })
        },
        handleClearTag(tag,idx){
            this.form.tags.splice(idx,1);
            this.tjTags.map(item=>{
                if(item.title==tag){
                    item.selected=false;
                }
            })
            this.$forceUpdate();
        },
        chooseTag(tag){
            if(this.form.tags.length==5){
                this.$amessage.warn('最多可添加5个标签！')
                return;
            }
            tag.selected=tag.selected==undefined?true:!tag.selected;
            if(tag.selected){
                this.form.tags.push(tag.title)
            }else{
                let items=this.form.tags.filter(r=>{
                    return r!=tag.title;
                })
                this.form.tags=items;
            }
            this.$forceUpdate();
        },
        resetForm(){
            this.form={
                tags:[],
                content:'',
                title:'',
                images:[],
                activityImages:[],
                imagesBean:{
                    imageList:[],
                    tagNames:''
                },
                videoUrl:[{},{},{},{},{},{}]
            }
        },
        handleCancelSelect(_property){
            this.selectAll(_property);
            if(_property=='images'){
                this.isBatchGimg=false;
            }else{
                this.isBatchActImg=false;
            }
        },
        handleConfirmDel(){
            let _property=this.keyProperty;
            let unSeldatas=this.form[_property].filter(r=>{
                return !r.selected;
            })
            this.form[_property]=unSeldatas;
            this.showDelConfirm=false;
        },
        batchSel(_property){
            if(_property=='images'){
                this.isCkall=true;
                let _cked=this.isCkall;
                this.form[_property].map(item=>{
                    item.selected=_cked;
                })
            }else{
                this.isActCkall=true;
                let _cked=this.isActCkall;
                this.form[_property].map(item=>{
                    item.selected=_cked;
                })
            }
            
            if(_property=='images')
                this.isBatchGimg=true;
            else
                this.isBatchActImg=true;
        },
        handleRemove(_property){
            this.keyProperty=_property;
            let selDatas=this.form[_property].filter(r=>{
                return r.selected;
            })
            if(selDatas.length==0){
                this.$amessage.error('未选择要删除的图片')
                return;
            }
            this.showDelConfirm=true;
        },
        handleMoveTo(_target){
            if(_target=='act'){
                let selectdatas=this.form['images'].filter(r=>{
                    return r.selected;
                })
                if(selectdatas.length==0){
                    this.$amessage.error('未选择要移动的图片')
                    return;
                }
                let overs=this.form['images'].filter(r=>{
                    return !r.selected;
                })
                this.form.images=overs;
                this.form.activityImages=[...this.form.activityImages,...selectdatas];
                this.$amessage.success('转移'+selectdatas.length+'个至活动成功')
            }else{
                let selectdatas=this.form['activityImages'].filter(r=>{
                    return r.selected;
                })
                if(selectdatas.length==0){
                    this.$amessage.error('未选择要移动的图片')
                    return;
                }
                let overs=this.form['activityImages'].filter(r=>{
                    return !r.selected;
                })
                this.form.activityImages=overs;
                this.form.images=[...this.form.images,...selectdatas];
                this.$amessage.success('转移'+selectdatas.length+'个至游戏成功')
            }
        },
        selectAll(_property){
            if(_property=='images'){
                this.isCkall=!this.isCkall;
                let _cked=this.isCkall;
                this.form[_property].map(item=>{
                    item.selected=_cked;
                })
            }else{
                this.isActCkall=!this.isActCkall;
                let _cked=this.isActCkall;
                this.form[_property].map(item=>{
                    item.selected=_cked;
                })
            }
        },
        addLink() {
            let url = this.linkText;
            let arry = url.match(/(http|https){1}:\/\/[^"'\s]*/);
            let _url='';
            if(arry&&arry.length>0){        
                _url=arry[0]; 
            }
            else{
                arry = url.match(/src=[\'\"]?([^\'\"]*)[\'\"]?/i);
                if(arry&&arry.length>0){     
                    _url=arry[1];
                }
            }
            if(!_url)
            {
                this.$amessage.warn('请复制有效格式的视频地址！');
                return;
            }
            if(this.isNotAreaImport){
                let isFind=false;
                this.form.videoUrl.map(item=>{
                    if(!item.url&&!isFind){
                        item.url=_url;
                        isFind=true;
                    }
                })
                if(isFind==false){
                    this.$amessage.warn('已经导入6个视频');
                }else{
                    this.$amessage.success('导入成功');
                }
            }else{
                this.form.videoUrl[this.videoIdx].url=_url;
                this.$amessage.success('导入成功');
            }
            this.showImport=false;
            this.linkText='';
        },
        handleOK(){
            this.nextFun();
        },
        handleInputConfirm(e) {
            let _value = e.target.value;
            if (!_value || !_value.replace(/\s+/g, "")) {
                e.target.value = "";
                return;
            }
            if (e.key == "Enter") {
                if (this.form.tags.length >= 5) {
                    this.$amessage.warn("最多可添加5个标签！");
                    
                    this.inputValue='';
                    return;
                }
                
                this.form.tags.push(_value);
                this.inputValue='';
            }
        },
        onVideoSucc(e,file){
            this.form.videoUrl[this.videoIdx].percentage=100;
            this.$forceUpdate()
        },
        videoProgress(e,file,fileList){
            //this.form.videoUrl[this.videoIdx]=file;
        },
        videoUploadBefore(file,idx){
            this.videoIdx=idx;
            this.aliData.key = this.aliInfo.dir + "/" + new Date().getTime() + file.name;
            this.form.videoUrl[idx].url='https://gameui-image2.oss-cn-shanghai.aliyuncs.com/'+this.aliData.key;
            return true;
        },
        initZuploadvideo() {
            let that=this;
            this.uploaderVideo = WebUploader.create({
                headers:{
                    'token':localStorage.getItem('token')
                },
                compress:false,
                threads:5,
                duplicate:true,
                    auto: true, // 选完文件后，是否自动上传 
                    swf: '../../../static/utils/Uploader.swf', // swf文件路径 
                    server: that.aliInfo.host, // 文件接收服务端
                    pick: '.zdy_upload_video', // 选择文件的按钮。可选 
                    formData: that.aliParamsData,
                    // 只允许选择图片文件。 
                    accept: { 
                    title: 'Videos',
                    extensions: 'avi,mp4',
                    mimeTypes: 'video/mp4,video/avi'   //修改这行
                    } 
                });

            this.uploaderVideo.on('uploadBeforeSend',function(obj,data){
                let filekey=that.aliInfo.dir+'/'+new Date().getTime()+obj.file.name;
                data.key=filekey;
                that.form.videoUrl.push({name:obj.file.name,id:obj.file.id,desc:'',url:that.$savePublishAlihost+'/'+filekey,progressno:0,completed:false,showSucc:false});
            })

            this.uploaderVideo.onUploadProgress=function(file,percentage){
                if (percentage <90) {
                percentage =89;
                }else if(percentage==100){
                percentage=90;
                }
                let _d=that.form.videoUrl.filter((f)=>f.id==file.id)
                if(_d.length>0){
                _d[0].progressno=percentage;
                that.$forceUpdate()
                }
            }

            this.uploaderVideo.on( 'uploadSuccess', function( file,response ) {
                let _d=that.form.videoUrl.filter(f=>f.id==file.id)
                if(_d.length>0){
                    _d[0].progressno=100;
                    //_d[0].url=response.code!=0?'':response.data;
                    _d[0].completed=true;
                    _d[0].showError=false;

                    setTimeout(function(){
                    _d[0].showError=false;
                    },1000)
                    that.$forceUpdate()
                }
            });
        },
        dataURLtoBlob(dataurl) {
                var arr = dataurl.split(","),
                    mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]),
                    n = bstr.length,
                    u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
            return new Blob([u8arr], { type: mime });
        },
        handleConfirmCrop() {
            if (!this.croPoption.image) {
                this.$amessage.warn("请先选择图片");
                return;
            }
            let that = this;

            let data = that.myCropper.getCroppedCanvas({
                imageSmoothingQuality: 'high'
                }).toDataURL('image/jpeg')
                data=that.dataURLtoBlob(data);

                let _formdata = new FormData();

                let fileUrlKey=that.aliInfo.dir+'/'+new Date().getTime()+that.cropFileName;
                _formdata.append("key",fileUrlKey);
                for(let p in that.aliParamsData){
                _formdata.append(p,that.aliParamsData[p]);
                }

                _formdata.append("file", data);
                // let index=layer.load(0, {shade: false});
                $.ajax({
                    url:that.aliInfo.host,
                    type: "POST",
                    cache: false,
                    data: _formdata,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function (updata) {
                        // layer.close(index);
                        that.form.image=that.$savePublishAlihost+'/'+fileUrlKey;
                        that.$amessage.success("上传成功");
                        that.handleClearCrop();
                    },
                    error: function(res) {
                        // layer.close(index);
                        
                        that.$amessage.error('上传服务器异常~')
                    }
            });
        },
        handleClearCrop() {
            this.showCut = false;
            // $('.cropper-container').remove();
            this.myCropper.destroy();
        },
        /* 封面上传 */
        firstPictureBefore(file) {
            this.cropFileName=file.name;
            var isImage = file.type === "image/jpg";

            if (!isImage) isImage = file.type === "image/jpeg";
            if (!isImage) isImage = file.type === "image/png";
            if (!isImage) isImage = file.type === "image/gif";

            const sizeFalg = file.size / 1024 / 1024 < 5;
            if (!isImage) {
                this.$amessage.warn("封面只能是[JPG,PNG,GIF]格式!");
                return false;
            }
            if (!sizeFalg) {
                this.$amessage.warn("封面大小不能超过 5MB!");
                return false;
            }

            let that = this;
            this.aliData.key = this.aliInfo.dir + "/" + new Date().getTime() + file.name;
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                let img = new Image();
                img.onload = function () {
                    that.croPoption.image = reader.result;

                    that.$forceUpdate();

                    if (!that.showEditCover) {
                        that.activeUploadCoverIndex=false;
                        that.showCut = true;
                    }
                    if (that.myCropper) {
                        that.myCropper.destroy();
                    }
                    that.initCropper();
                    // }
                };
                img.src = reader.result;
            };
            return false;
        },
        initCropper() {
            let that = this;
            that.$nextTick(() => {
                that.myCropper = new Cropper(that.$refs.gimage, {
                    viewMode: 1,
                    cropBoxResizable: true,
                    autoCropArea: 1,
                    aspectRatio: 104 / 78,
                    preview: ".preview-img",
                    dragMode: "move",
                    toggleDragModeOnDblclick: false
                });
            });
        },
        firstPictureSuccess(err, file, fileList) {
            let img = new Image();
            let _URL = window.URL || window.webkitURL;
            let that = this;
            img.onload = function () {
                if (img.width != 800 && img.height != 600) {
                    that.addArticleParam.image = "";
                    that.$amessage.warn("建议尺寸800x600");
                } else {
                    that.$amessage.success("封面上传成功！");
                that.addArticleParam.image = that.serverUrl + "/" + that.aliData.key;
                }
            };
            img.src = this.serverUrl + "/" + this.aliData.key;
        },
        async initUpload(){
            let res=await api.getImgPoc();

            this.aliInfo = res.data;
            this.aliParamsData={
                host:res.data.host,
                policy:res.data.policy,
                Signature:res.data.signature,
                OSSAccessKeyId:res.data.accessid
            }

            let that = this;
            this.uploader = WebUploader.create({
            headers: {
                token: localStorage.getItem("token"),
            },
            dnd: ".pro-dnd-area",
            disableGlobalDnd: true,
            compress: false,
            threads: 5,
            duplicate: true,
            auto: true, // 选完文件后，是否自动上传
            swf: "../../../static/utils/Uploader.swf", // swf文件路径
            server: that.aliInfo.host, // 文件接收服务端
            pick: ".pro_zdy_myupload", // 选择文件的按钮。可选
            formData:that.aliParamsData,
            // 只允许选择图片文件。
            accept: {
                title: "Images",
                extensions: "jpg,jpeg,png,gif",
                mimeTypes: "image/jpg,image/jpeg,image/png,image/gif", //修改这行
            },
            });

            this.uploader.on('uploadBeforeSend',function(obj,data){
            let filekey=that.aliInfo.dir+'/'+new Date().getTime()+obj.file.name;
            data.key=filekey;
            that.form.images.push({selected:false,id:obj.file.id,desc:'',url:that.$savePublishAlihost+'/'+filekey,progressno:0,completed:false,showSucc:false,tags:[]});
            })

            // 拖拽时不接受 js, txt 文件。
            this.uploader.on("dndAccept", function (items) {
            var denied = false,
                len = items.length,
                i = 0,
                // 修改js类型
                unAllowed = "text/plain;application/javascript ";

            for (; i < len; i++) {
                // 如果在列表里面
                if (~unAllowed.indexOf(items[i].type)) {
                denied = true;
                break;
                }
            }

            return !denied;
            });
            

            this.uploader.on("error", function (er) {});

            this.uploader.onUploadProgress = function (file, percentage) {
            if (percentage < 90) {
                percentage = 89;
            } else if (percentage == 100) {
                percentage = 90;
            }
            
            let _d = that.form.images.filter((f) => f.id == file.id);
            if (_d.length > 0) {
                _d[0].progressno = percentage;
                that.$forceUpdate();
            }
            };

            this.uploader.on("uploadSuccess", function (file, response) {
            let _d = that.form.images.filter((f) => f.id == file.id);
            if (_d.length > 0) {
                _d[0].progressno = 100;
                //_d[0].url = response.data;
                _d[0].completed = true;
                _d[0].showSucc = true;

                let img=new Image();
                img.src=_d[0].url;
                img.onload=function(){
                _d[0].imageWidth=img.width;
                _d[0].imageHeight=img.height;
                }
                setTimeout(function () {
                _d[0].showSucc = false;
                }, 1000);
                that.$forceUpdate();
            }
            });

        },
        categoryChange: function (value) {
            this.form.categoryId = this.selectedOptions[
                this.selectedOptions.length - 1
            ];
        },
        handlePreviewFun(){
            let that=this;
            this.batchArticle(2,function(calldata){
                that.$router.push({path: "/work/"+calldata.data.id})
            })
        },
        async batchArticle(_status,callback){
            if(this.isposted==true){
                this.$amessage.warn('服务器正在处理,请勿频繁操作~');
                return;
            }
            let data=Object.assign({},this.form);
            data.status=_status;
            data.images=[...data.images,...data.activityImages||[]];
            let videos=[];
            data.videoUrl.map(item=>{
                if(item.url&&item.percentage==100){
                    videos.push(item.url)
                }
            })
            let imgs=[];
            data.images.map(i=>{
                if(i.completed){
                    imgs.push({url:i.url,tags:i.tags,imageWidth:i.imageWidth,imageHeight:i.imageHeight,activity:i.activity?true:false})
                }
            })
            // let activityImgs=[];
            // data.activityImages.map(i=>{
            //     if(i.completed){
            //         activityImgs.push({url:i.url,tags:i.tags,imageWidth:i.imageWidth,imageHeight:i.imageHeight})
            //     }
            // })
            delete data.images;
            // data.imagesBean={imageList:[],tagNames:[]};
            data.commentStatus=parseInt(data.commentStatus);
            if(!data.imagesBean){
                data.imagesBean={imageList:[],tagNames:[]};
            }
            data.imagesBean.imageList=imgs;
            data.tags=data.tags.join(',');
            if(data.imagesBean.tagNames.length>0){
                data.imagesBean.tagNames=data.imagesBean.tagNames.split(',');
            }else{
                data.imagesBean.tagNames=[];
            }

            delete data.themes;

            data.videoUrl=videos.join(',');
            delete data.activityImages;
            let res={};
            $('.null-error').removeClass('null-error');
            if(!data.title){
                $('body,html').animate({ scrollTop: 0 }, 100);
                $('#form_title').addClass('null-error');
                this.$amessage.warn('请先将信息未填写完整~');
                return;
            }
            // if(!data.content){
            //     $('body,html').animate({ scrollTop: 0 }, 100);
            //     $('#form_content').addClass('null-error');
            //     this.$amessage.warn('请先将信息未填写完整~');
            //     return;
            // }
            if(!data.categoryId){
                $('body,html').animate({ scrollTop: 0 }, 100);
                $('#form_categoryId').addClass('null-error');
                this.$amessage.warn('请先将信息未填写完整~');
                return;
            }
            if(!data.comeFrom){
                $('body,html').animate({ scrollTop: 0 }, 100);
                $('#form_comeFrom').addClass('null-error');
                this.$amessage.warn('请先将信息未填写完整~');
                return;
            }
            if(!data.copyRight){
                $('body,html').animate({ scrollTop: 0 }, 100);
                $('#form_copyRight').addClass('null-error');
                this.$amessage.warn('请先将信息未填写完整~');
                return;
            }
            if(!data.image){
                $('body,html').animate({ scrollTop: 0 }, 100);
                $('#form_image').addClass('null-error');
                this.$amessage.warn('请先将信息未填写完整~');
                return;
            }
            this.isposted=true;
            if(data.id){
                res=await api.editArticle(data);
                if(res.code==0){
                    this.$bhelper.addCirRecord('WORK');
                    this.$store.dispatch('setLeftMenu',[])
                    this.resetForm();
                    this.isposted=false;
                    this.$amessage.success('更新成功！快去告诉你的粉丝们')
                    this.$router.replace({path:'/publish/publishManage?t=0&s=1'})
                }
            }else{
                res=await api.addArticle(data);
                if(res.code==0){
                    this.$bhelper.addCirRecord('WORK');
                    this.$store.dispatch('setLeftMenu',[])
                    this.resetForm();
                    this.isposted=false;
                    if(!callback)
                    {
                        this.$amessage.success('发布成功！准备接受掌声吧')
                        this.$router.replace({path:'/publish/publishManage?t=0&s=1'})
                    }else{
                        callback(res)
                    }
                }
            }
        }
    }
}
</script>

<style lang="less">
.work-page{
    >form{
        display: flex;
    }
    
    .panel-tit{
        font-weight:500;
        font-size:16px;
        line-height:22px;
        margin-bottom:20px;
        .el-tooltip{
            color:#6A6A80;
            margin-left:10px;
            cursor: pointer;
        }
        .small-tip{
            font-size:12px;
            color:#6A6A80;
            margin-left:14px;
        }
        &.flex-between{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .add-tag{
            line-height: 38px;
            width:97px;
            text-align: center;
            border-radius:10px;
            background:#29272F;
            color:#fff;
            display: inline-block;
            margin-right:11px;
            font-size:14px;
        }
        
        .funs {
            user-select: none;
            display: flex;
            align-items: center;

            a {
                &:active {
                    opacity: .9;
                }
            }
        }
        
        .img-select-len{
            background: #37363E;
            border-radius: 10px;
            padding: 0px 13px;
            padding-right: 0px;
            display: flex;
            width: max-content;
            align-items: center;

            i{
                color:#11CCB1;
                margin:0px 4px;
                font-style: normal;
            }
            .cancel-select {
                width: 10px;
                height: 10px;
                background: url('../../assets/pro/close_collect.svg') no-repeat;
                background-size: 10px 10px;
                background-position: center;
                cursor: pointer;
                line-height: 38px;
                height: 38px;
                width: 38px;
            }
        }
        .select-all{
            background:#29272F;
            line-height:38px;
            border-radius:10px;
            text-align: center;
            width:97px;
            font-size:14px;
            display: inline-block;
            margin-left:17px;
        }
        .img-move-to{
            background:#F8004E;
            background-image:url('../../assets/pro/img_move_icon.svg');
            background-repeat: no-repeat;
            background-position:15px center;
            line-height:38px;
            font-size:14px;
            width:121px;
            text-align: right;
            background-size:14px;
            display: inline-block;
            margin-left:10px;
            border-radius:10px;
            padding:0px 12px 0px 15px;
        }
        .put-tag{
            background:#F8004E;
            background-image:url('../../assets/pro/tag_icon.svg');
            background-repeat: no-repeat;
            background-position:15px center;
            line-height:38px;
            font-size:14px;
            width:97px;
            text-align: center;
            background-size:14px;
            display: inline-block;
            margin-left:10px;
            border-radius:10px;
            padding:0px 12px 0px 25px;
        }
        .del-img{
            background:#F8004E;
            background-image:url('../../assets/pro/img_del_icon.svg');
            background-repeat: no-repeat;
            background-position:15px center;
            line-height:38px;
            font-size:14px;
            width:97px;
            text-align: center;
            background-size:14px;
            display: inline-block;
            margin-left:10px;
            border-radius:10px;
            padding:0px 12px 0px 25px;
        }
        .batch-mgr-btn{
            line-height: 38px;
            width:97px;
            text-align: center;
            border-radius:10px;
            background:#29272F;
            color:#fff;
            display: inline-block;
            font-size:14px;
        }
    }
    .basic-box{
        width:50%;
        background:#181818;
        border-radius:16px;
        padding:29px 30px;
        
        .null-error{
            input{
                border:1px solid #11CCB1 !important;
                border-radius: 8px;
            }
            .pro-quill-editor{
                border:1px solid #11CCB1 !important;
                border-radius: 8px;
            }
            .cur{
                border:1px solid #11CCB1 !important;
            }
            .upload-btn{
                border-color:#11CCB1;
            }
        }
        
        .drop-down-control{
            display: flex;
            flex-wrap:wrap;
            .flex-ddl-item{
                display: flex;
                align-items:center;
                margin-bottom:10px;
                width:100%;
                .mk-cus-ddl,.pro-work-elcascader{
                    min-width:calc(100% / 3 - 14px) !important;
                }
            }
        }
        .mt40{
            margin-top:40px;
        }
        .mt48{
            margin-top:48px;
        }
        .p-field-control{
            border-radius:8px;
            overflow: hidden;
            position: relative;
            margin-bottom:10px;
            input[type="text"]{
                height:40px;
                padding-left:14px;
                border:none;
                width:100%;
                background:#23232A;
                color:#fff;
                font-size:14px;
                padding-right:40px;
            }
            textarea{
                height:80px;
                padding-left:14px;
                border:none;
                width:100%;
                background:#23232A;
                color:#fff;
                font-size:14px;
                padding-right:40px;
                resize: none;
                padding-top:10px;
            }
            .word-num{
                position: absolute;
                right: 14px;
                font-style: normal;
                color: #969696;
                top: 10px;
                background:#23232A;
                padding:0px 10px;
                &.bot-r {
                    bottom: 10px;
                    top: inherit;
                }
            }
            
            .pro-quill-editor{
                height:80px;
                // ::v-deep {
                    .ql-toolbar{   
                        display: none !important;
                    }
                    .ql-container{
                        border:none !important;
                    }
                    // .ql-editor{
                    //     border-radius:4px !important;
                    //     border:1px solid #171719 !important;
                    //     border-top:1px solid #171719 !important;
                    //     height:120px;
                    //     background:#171719;
                    // }
                    // .ql-editor:focus{
                    //     border:1px solid red !important;
                    // }
                    .ql-snow .ql-blank:-webkit-input-placeholder{
                        font-style: normal !important;
                    }
                // }
           }
        }
        .import-video-btn{
            line-height: 38px;
            width:97px;
            text-align: center;
            border-radius:10px;
            background:#29272F;
            color:#fff;
            font-size:14px;
            display: inline-block;
        }
        .p-label-field-control{
            border-radius:8px;
            overflow: hidden;
            position: relative;
            margin-bottom:10px;
            display: flex;
            align-items: center;
            input[type="text"]{
                height:40px;
                padding-left:14px;
                border:none;
                width:100%;
                background:#23232A;
                color:#fff;
                font-size:14px;
                padding-right:40px;
            }
            label{
                color:#fff;
                font-size:14px;
                margin-right:36px;
                white-space: nowrap;
                min-width:40px;
            }
            .word-num{
                position: absolute;
                right:14px;
                font-style: normal;
                color:#969696;
                top:10px;
                &.bot-r{
                    bottom:10px;
                    top:inherit;
                
                    padding:0px 5px;
                    z-index:1;
                    background:#23232A;
                }
            }
        }
        .upload-btn{
            width:210px;
            height:160px;
            border-radius:10px;
            border:2px dashed #52525C;
            cursor: pointer;
            display:block;
            overflow: hidden;
            background:inherit !important;
            .el-upload{
                width:100%;
                height:100%;
            }
            .el-upload-dragger{
                background-color:#181818;
                width:100%;
                border:none;
                height:100%;
                background:url('../../assets/pro/upload_cover.svg') no-repeat;
                background-position:center;
                background-size:40px 40px;
            }
        }
        
        .upload-video-btn{
            width: 210px;
            height: 118px;
            border-radius: 10px;
            border: 2px dashed #52525C;
            background: url('../../assets/pro/upload_cover.svg') no-repeat;
            background-position: center;
            background-size: 40px 40px;
            cursor: pointer;
            display: block;
            position: relative;
            overflow: hidden;
            
            iframe{
                width:100%;
                height:100%;
            }
            
            .play-icon {
                background: url('../../assets/pro/home_v_play.svg') no-repeat;
                background-position: center center;
                display: inline-block;
                position: absolute;
                z-index: 1;
                left: 0px;
                right: 0px;
                top: 0px;
                bottom: 0px;
                background-size: 80px;
            }
            .del-btn{
                z-index:1;
                position: absolute;
                top:5px;
                right:5px;
                width:30px;height:30px;
                background:url('../../assets/pro/del_gm_img.svg') no-repeat;
                // position: absolute;
                // left:calc((100% - 30px) / 2);
                // top:calc((100% - 30px) / 2 - 15px);
                margin-left:10px;
                &:hover{
                    background:url('../../assets/pro/del_gm_img_hover.svg') no-repeat;
                }
            }
        }
        .upload-videos{
            display: flex;
            flex-wrap:wrap;
            grid-gap:10px;
            .upload-video-btn{
                // margin-right:10px;
                // margin-bottom:10px;
                // overflow: hidden;
                // background:inherit !important;
                >div:last-child{
                    width:100% !important;
                    height:100% !important;
                    overflow: hidden;
                    .el-upload-dragger{
                        background:url('../../assets/pro/upload_cover.svg') no-repeat;
                        background-position:center;
                        background-size:40px 40px;
                        width:100% !important;
                        height:100% !important;
                        border-color:#181818 !important;
                        video{
                            width:100%;
                            height:100%;
                        }
                    }
                    input{
                        width:100% !important;
                        height:100% !important;
                        cursor: pointer;
                    }
                }
            }
        }
    }
    .tag-control{
        height:40px;
        border-radius:8px;
        overflow: hidden;
        display: flex;
        align-items: center;
        padding-left:5px;
        background:#23232A;
        position: relative;
        .inp-tags{
            display: flex;
            align-items: center;
            .tag{
                line-height:30px;
                padding-left:15px;
                padding-right:12px;
                border-radius:30px;
                white-space:nowrap;
                margin-right:5px;
                background:#33333C;
                height:100%;
                display: inline-block;
                font-size:14px;
                .del-tag{
                    width:10px;height:10px;
                    background:url('../../assets/pro/del_tag_ico.svg') no-repeat;
                    background-size:cover;
                    display: inline-block;
                    margin-left:11px;
                    opacity:.8;
                    &:hover{
                        opacity:1;
                    }
                }
            }
        }
        input{
            background:#23232A;
            color: #fff;
            font-size:14px;
            width:100%;
            height:40px;
            padding-left:13px;
            border:none;
        }
        .num{
            font-style: normal;
            font-size:14px;
            color:#6A6A80;
            position: absolute;
            right:10px;
            top:0px;z-index:11;
            background: #23232A;
            padding-left: 10px;
            line-height:40px;
            cursor: default;
            user-select: none;
        }
    }
    .recommend-tag-box{
        display: flex;
        align-items: baseline;
        font-size:14px;
        margin-top:15px;
        flex-wrap:wrap;
        .label{
            margin-right:30px;
            white-space: nowrap;
        }
        .tags{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            grid-gap:10px;
            flex:1;
            .tag{
                line-height:30px;
                border-radius:30px;
                padding:0px 15px;
                background:#242327;
                color:#fff;
                // margin-right:30px;
                &.active{
                    background:#11CCB1 ;
                }
            }
        }
    }
    .game-img-workbox{
        margin-left:20px;
        width:50%;
        background:#181818;
        border-radius:16px;
        
        padding:29px 30px;

        .single-upload-btn{
            background-color: #23232A;
            border:2px dashed #4E4E57;
            border-radius:16px;
            // width:700px;
            height:400px;
            background-image:url('../../assets/pro/single_upload_bgico.svg');
            background-repeat:no-repeat;
            background-size:90px 90px;
            background-position:center 30%;
            display:block;
            position: relative;
            text-align: center;
            i{
                font-style: normal;
            }
            .ass-con{
                position: absolute;
                bottom:0px;
                left: 0px;
                right: 0px;
                top:0px;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                padding-top:169px;
                .up-text{
                    font-size:20px;
                    font-weight:500;
                    display: block;
                    line-height:28px;
                }
                .tip{
                    color:#6A6A80;
                    font-size:14px;
                    display:block;
                    margin-top:76px;
                    line-height:20px;
                    &.mx-w459{
                        max-width:459px !important;
                        margin:0 auto;
                        margin-top:50px;
                    }
                }
                .plus{
                    // background:url('../../assets/pro/upload_cover.svg') no-repeat;
                    // background-position:left center;
                    // background-size:22px 22px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding-left:30px;
                    margin-top:25px;
                    line-height:22px;
                    font-weight:500;
                    margin-bottom:14px;
                    font-size:14px;
                    line-height:20px;
                    .go-add{
                        font-size:16px;
                        color:#11CCB1;
                        font-weight:500;
                        text-decoration: underline;
                        margin-left:3px;
                        
                        >div:last-child{
                            position: absolute!important;
                            left: 0!important;
                            top: 0!important;
                            height: 100%!important;
                            width: 100%!important;
                            opacity: 0;
                        }
                    }
                }
            }
            &.sk-hover,
            &.webuploader-dnd-over {
                border-color: #11CCB1;
                // background-color: #250C12;
            }
        }

        .g-img-mx-harea{
            max-height:600px;
            overflow-y:auto;
            position: relative;
            &::-webkit-scrollbar{
                width: 6px;
                height: 8px;
                background-color: transparent;
            }
            /*滚动条的轨道*/
            &::-webkit-scrollbar-track{
                background-color: transparent;
            }
            /*滚动条的滑块按钮*/
            &::-webkit-scrollbar-thumb{
                border-radius:6px;
                background-color: #29272F;
            }
            /*滚动条的上下两端的按钮*/
            &::-webkit-scrollbar-button{
                height: 0;
            }
            
            /* 两个滚动条的交汇处 */
            &::-webkit-scrollbar-corner{
                background-color: transparent;
            }
        }
        .mt31{
            margin-top:31px;
        }
        .gm-imgs{
            display: flex;
            flex-wrap:wrap;
            grid-gap:10px;
            .g-img-item{
                width: calc((100% - 50px) / 5);
                height:98px;
                border-radius:8px;
                overflow: hidden;
                // margin-right:10px;
                // margin-bottom:10px;
                user-select: none;
                position: relative;
                &:nth-child(5n){
                    margin-right:0px;
                }
                >img{
                    width:100%;
                    height:100%;
                    object-fit: cover;
                }
                .btns{
                    position: absolute;
                    top:0px;
                    left: 0px;
                    right: 0px;
                    bottom:0px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .move-btn{
                    width:30px;height:30px;
                    background:url('../../assets/pro/move_gm_img.svg') no-repeat;
                    // position: absolute;
                    // left:calc((100% - 30px) / 2);
                    // top:calc((100% - 30px) / 2 - 15px);
                    &:hover{
                        background:url('../../assets/pro/move_gm_img_hover.svg') no-repeat;
                    }
                }
                .view-btn{
                    width:30px;height:30px;
                    background:url('../../assets/pro/view_gm_img.svg') no-repeat;
                    // position: absolute;
                    // left:calc((100% - 30px) / 2);
                    // top:calc((100% - 30px) / 2 - 15px);
                    margin-left:10px;
                    &:hover{
                        background:url('../../assets/pro/view_gm_img_hover.svg') no-repeat;
                    }
                }
                .del-btn{
                    width:30px;height:30px;
                    background:url('../../assets/pro/del_gm_img.svg') no-repeat;
                    // position: absolute;
                    // left:calc((100% - 30px) / 2);
                    // top:calc((100% - 30px) / 2 - 15px);
                    margin-left:10px;
                    &:hover{
                        background:url('../../assets/pro/del_gm_img_hover.svg') no-repeat;
                    }
                }
                .set-tag{
                    position: absolute;
                    left:calc((100% - 79px) / 2);
                    top:calc((100% - 26px) / 2 + 25px);
                    background: rgba(0,0,0,0.4);
                    width:79px;
                    line-height: 26px;
                    text-align: center;
                    border-radius:13px;
                    line-height:26px;
                    color:#fff;
                    &:hover{
                        background: rgba(0,0,0,0.6);
                    }
                }
                
                .select-btn{
                    width:20px;height:20px;
                    position: absolute;
                    right:7px;top:7px;
                    background:url('../../assets/pro/mutiple_select_pic.svg') no-repeat;
                    background-size:cover;
                    display: none;
                    &.active{
                        background:url('../../assets/pro/mutiple_selected_pic.svg') no-repeat;
                        background-size:cover;
                    }
                }
                &.no-img{
                    border:1px dashed #52525C;
                }
                
                .hid-el{
                    opacity:0;
                    z-index:-1;
                    transition:.1s all linear;
                }
                &:hover{
                    .hid-el{
                        opacity:1;
                        z-index:1;
                    }
                }
                &.act-sel{
                    .hid-el{
                        display: none;
                    }
                    .select-btn{
                        display: inherit;
                    }
                }
            }
        }
    }

    .bot-single-upload-area{
        text-align: center;
        height:105px;
        border:2px dashed #52525C;
        border-radius:16px;
        user-select: none;
        background:#23232A;
        position: relative;
        .plus{
            background:url('../../assets/pro/upload_cover.svg') no-repeat;
            background-position:35% center !important;
            background-size:22px 22px;
            padding-left:30px;
            margin-top:25px;
            line-height:22px;
            margin-bottom:14px;
            font-size:14px;
            font-weight:500;

            display: flex !important;
            align-items: center;
            justify-content: center;
            .go-add{
                font-size:16px;
                color:#11CCB1;
                font-weight:500;
                text-decoration: underline;
                margin-left:3px;
                >div:last-child{
                    position: absolute!important;
                    left: 0!important;
                    top: 0!important;
                    height: 100%!important;
                    width: 100%!important;
                    opacity: 0;
                }
            }
        }
        .plus-sk{
            background:url('../../assets/pro/sk_upload_ico.svg') no-repeat;
            background-position:left center;
            background-size:22px 22px;
            display: inline-block;
            padding-left:30px;
            margin-top:25px;
            line-height:22px;
            margin-bottom:14px;
        }
        .tip{
            font-size:14px;
            color:#969696;
            font-weight:500;
            display:block;
        }

        &.sk-hover,&.webuploader-dnd-over{
            border-color:#11CCB1;
            // background-color:#250C12;
        }
    }
    .footer-fun-bar {
        padding: 18px 0px;
        // text-align: right;
        user-select: none;

        >a {
            display: inline-block;
            line-height: 44px;
            font-size: 16px;
            font-weight: 500;
            &:not(.publish):hover{
                background:#393740;
            }
        }

        .draft {
            background: #29272F;
            color: #fff;
            width: 120px;
            text-align: center;
            border-radius: 10px;
        }

        .preview {
            background: #29272F;
            color: #fff;
            width: 110px;
            text-align: center;
            border-radius: 10px;
            margin: 0px 10px;
        }

        .publish {
            background: #11CCB1;
            color: #fff;
            padding:0px 20px;
            // width: 110px;
            text-align: center;
            border-radius: 10px;
        }
    }
}










































































































































</style>